<template>
  <div class="app-container">
    <el-card class="search-card" shadow="hover">
      <div class="search-header">
        <div class="title">
          <i class="el-icon-data-analysis"></i>
          <span>智能测评分析</span>
        </div>
        <div class="description">
          输入学生学号，选择测评方式，AI将根据学生个人情况推荐最适合的志愿选择
        </div>
      </div>
      
      <el-form :model="evaluateParam" :inline="true" class="search-form">
        <el-form-item label="学生学号">
          <el-input 
            v-model="evaluateParam.studentNo" 
            placeholder="请输入学生学号"
            prefix-icon="el-icon-user"
            clearable
          />
        </el-form-item>
        
        <!-- 新的卡片式测评方式选择 -->
        <el-form-item label="测评方式" class="evaluation-mode-selector">
          <div class="mode-cards">
            <div 
              class="mode-card" 
              :class="{ 'active': evaluateMode === 'score' }"
              @click="selectMode('score')"
            >
              <i class="el-icon-data-line card-icon"></i>
              <span class="card-title">按分数测评</span>
              <span class="card-desc">基于成绩推荐</span>
            </div>
            <div 
              class="mode-card" 
              :class="{ 'active': evaluateMode === 'tag' }"
              @click="selectMode('tag')"
            >
              <i class="el-icon-price-tag card-icon"></i>
              <span class="card-title">按标签测评</span>
              <span class="card-desc">结合兴趣特长</span>
            </div>
            <div 
              class="mode-card" 
              :class="{ 'active': evaluateMode === 'both' }"
              @click="selectMode('both')"
            >
              <i class="el-icon-s-operation card-icon"></i>
              <span class="card-title">综合测评</span>
              <span class="card-desc">分数与标签结合</span>
            </div>
            <div 
              class="mode-card ai-card" 
              :class="{ 'active': evaluateMode === 'ai' }"
              @click="selectMode('ai')"
            >
              <i class="el-icon-cpu card-icon"></i>
              <span class="card-title">AI智能测评</span>
              <span class="card-desc">智能分析推荐</span>
            </div>
          </div>
        </el-form-item>
        
        <el-form-item class="action-buttons">
          <el-button 
            type="primary" 
            icon="el-icon-search" 
            :loading="evaluateLoading"
            @click="handlerEvaluate"
          >开始测评</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      
      <!-- AI分析配置选项 -->
      <div v-if="evaluateMode === 'ai'" class="ai-options">
        <el-divider content-position="left"><i class="el-icon-magic-stick"></i> AI分析参数</el-divider>
        <el-form :model="aiOptions" class="ai-param-form">
          <div class="param-grid"> 
            <el-form-item label="分析维度" class="param-item param-dimension">
              <el-select v-model="aiOptions.dimensions" multiple collapse-tags placeholder="请选择分析维度" style="width: 100%;">
                <el-option label="学科兴趣匹配度" value="interest"></el-option>
                <el-option label="就业前景分析" value="career"></el-option>
                <el-option label="院校环境适应性" value="environment"></el-option>
                <el-option label="专业发展潜力" value="potential"></el-option>
                <el-option label="个人性格匹配度" value="personality"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分析深度" class="param-item param-depth">
              <el-slider v-model="aiOptions.depth" :step="1" :marks="{1:'浅', 3:'中', 5:'深'}" :min="1" :max="5" style="width: 95%;"></el-slider>
            </el-form-item>
            <el-form-item label="推荐数量" class="param-item param-count">
              <el-input-number v-model="aiOptions.count" :min="1" :max="10" size="small"></el-input-number>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>

    <el-card 
      v-show="evaluateResultShow" 
      v-loading="evaluateLoading" 
      class="result-card" 
      shadow="hover"
    >
      <div slot="header" class="result-header">
        <div class="title">
          <i class="el-icon-s-data"></i>
          <span>测评结果</span>
          <el-tag v-if="evaluateMode === 'ai'" type="success" effect="dark" size="small" class="ai-tag">
            <i class="el-icon-cpu"></i> AI分析
          </el-tag>
        </div>
        <div>
          <el-button type="text" icon="el-icon-share" @click="shareResult">分享结果</el-button>
          <el-button type="text" icon="el-icon-download" @click="exportResult">导出结果</el-button>
        </div>
      </div>
      
      <div class="result-content">
        <el-empty v-if="evaluateResult.length === 0" description="暂无数据"></el-empty>
        <div v-else>
          <!-- 学生基本信息和分析摘要 -->
          <div class="student-info-panel">
            <div class="student-basic-info">
              <div class="avatar">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="info">
                <div class="name">学号: {{ evaluateParam.studentNo }}</div>
                <div class="stats">
                  <el-tag size="mini">{{ studentProfile.grade }}年级</el-tag>
                  <el-tag size="mini" type="success">{{ studentProfile.score }}分</el-tag>
                  <el-tag size="mini" type="warning">{{ studentProfile.rank }}名</el-tag>
                </div>
              </div>
            </div>
            <div v-if="evaluateMode === 'ai'" class="ai-summary">
              <div class="summary-title"><i class="el-icon-cpu"></i> AI分析概要</div>
              <div class="summary-content">
                {{ aiSummary }}
              </div>
            </div>
          </div>

          <!-- 匹配度雷达图 -->
          <div v-if="evaluateMode === 'ai'" class="chart-panel">
            <div class="chart-title">综合匹配度分析</div>
            <div class="charts">
              <div id="matchRadarChart" class="radar-chart"></div>
              <div id="scoreBarChart" class="bar-chart"></div>
            </div>
          </div>

          <!-- 详细推荐列表 -->
          <div class="recommendations-panel">
            <div class="panel-title">
              <span>志愿推荐</span>
              <el-radio-group v-model="viewMode" size="mini">
                <el-radio-button label="list">列表视图</el-radio-button>
                <el-radio-button label="card">卡片视图</el-radio-button>
              </el-radio-group>
            </div>

            <!-- 列表视图 -->
            <el-timeline v-if="viewMode === 'list'">
              <el-timeline-item
                v-for="(result, index) in evaluateResult"
                :key="index"
                :type="getTimelineItemType(index)"
                :color="getTimelineItemColor(index)"
                :timestamp="`推荐 ${index + 1}`"
              >
                <el-card class="recommendation-card">
                  <div class="recommendation-content">
                    {{ result }}
                    <div v-if="evaluateMode === 'ai'" class="ai-recommendation-detail">
                      <div class="match-score">
                        匹配度: <el-rate :value="getRandomMatchScore(index)" disabled show-score text-color="#ff9900" score-template="{value}%"></el-rate>
                      </div>
                      <div class="match-tags">
                        <el-tag v-for="tag in getRandomTags(index)" :key="tag" size="mini" effect="plain" class="match-tag">{{ tag }}</el-tag>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>

            <!-- 卡片视图 -->
            <div v-else class="card-view">
              <el-row :gutter="20">
                <el-col :span="8" v-for="(result, index) in evaluateResult" :key="index">
                  <el-card class="recommendation-card-grid" :body-style="{ padding: '0px' }">
                    <div class="card-header" :style="{backgroundColor: getTimelineItemColor(index)}">
                      <span class="rank">{{ index + 1 }}</span>
                      <span class="match" v-if="evaluateMode === 'ai'">匹配度: {{ getRandomMatchScore(index) }}%</span>
                    </div>
                    <div class="card-content">
                      <h4>{{ getCollegeName(result) }}</h4>
                      <p>{{ getMajorName(result) }}</p>
                      <div v-if="evaluateMode === 'ai'" class="ai-tags">
                        <el-tag v-for="tag in getRandomTags(index).slice(0,2)" :key="tag" size="mini" effect="plain">{{ tag }}</el-tag>
                      </div>
                    </div>
                    <div class="card-footer">
                      <el-button 
                        type="text" 
                        icon="el-icon-view" 
                        @click="handleRecommendationDetail(result, index)"
                      >查看详情</el-button>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 专家建议 -->
          <div v-if="evaluateMode === 'ai'" class="expert-advice">
            <div class="advice-title"><i class="el-icon-s-opportunity"></i> AI专家建议</div>
            <div class="advice-content">
              <p>{{ expertAdvice }}</p>
              <el-button type="primary" plain icon="el-icon-chat-dot-round" size="small">咨询专业顾问</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 新增：推荐详情对话框 -->
    <el-dialog
      title="志愿推荐详情"
      :visible.sync="recommendationDetailDialogVisible"
      width="500px"
      append-to-body
      custom-class="recommendation-detail-dialog"
    >
      <div v-if="selectedRecommendation" class="detail-content">
        <div class="detail-header">
          <span class="rank" :style="{ backgroundColor: getTimelineItemColor(selectedRecommendation.index) }">
            {{ selectedRecommendation.index + 1 }}
          </span>
          <div class="college-major">
            <h4 class="college-name">{{ getCollegeName(selectedRecommendation.result) }}</h4>
            <p class="major-name">{{ getMajorName(selectedRecommendation.result) }}</p>
          </div>
          <div class="match-score-detail" v-if="evaluateMode === 'ai'">
             匹配度: {{ getRandomMatchScore(selectedRecommendation.index) }}%
          </div>
        </div>
        
        <el-descriptions :column="1" border size="small" class="detail-desc">
          <el-descriptions-item label="学校代码">-- 模拟代码 --</el-descriptions-item>
          <el-descriptions-item label="专业代码">-- 模拟代码 --</el-descriptions-item>
          <el-descriptions-item label="选科要求">-- 待补充 --</el-descriptions-item>
          <el-descriptions-item label="去年分数线">-- 待补充 --</el-descriptions-item>
        </el-descriptions>

        <div v-if="evaluateMode === 'ai'" class="detail-tags">
          <div class="tags-title">AI分析标签:</div>
          <el-tag 
            v-for="tag in getRandomTags(selectedRecommendation.index)" 
            :key="tag" 
            size="small" 
            effect="plain" 
            class="detail-tag"
          >{{ tag }}</el-tag>
        </div>
        
        <div class="detail-placeholder">
            <p>此处可以添加更多关于院校和专业的详细介绍...</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="recommendationDetailDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="recommendationDetailDialogVisible = false">加入备选</el-button> 
      </span>
    </el-dialog>

    <!-- <el-button type="primary" @click="$router.push('/career/analysis')">
      职业能力分析
    </el-button> -->
  </div>
</template>

<script>
import { evaluate } from "@/api/entrance/aspiration";
import * as echarts from 'echarts';

export default {
  name: "Evaluate",
  data() {
    return {
      // 测评参数
      evaluateParam: {
        studentNo: '',
        byScore: true,
        byTag: false
      },
      evaluateMode: 'score',
      evaluateLoading: false,
      // 测评结果
      evaluateResult: [],
      evaluateResultShow: false,
      // AI分析选项
      aiOptions: {
        dimensions: ['interest', 'career'],
        depth: 3,
        count: 5
      },
      // 结果显示方式
      viewMode: 'list',
      // 模拟的学生信息
      studentProfile: {
        grade: '高三',
        score: 650,
        rank: 1200
      },
      // AI分析摘要
      aiSummary: '根据AI多维度分析，该学生在理科领域展现出较强的学习能力，特别是数学和物理科目表现突出。性格偏向于理性思考和分析，适合从事工程类、计算机类专业。建议选择理工类院校，重点关注计算机科学、电子工程等专业方向。',
      // 专家建议
      expertAdvice: '结合您的学科优势和个人特点，建议考虑将第一批次的志愿填报在计算机相关专业，特别是具有人工智能特色的院校。第二批次可以考虑电子信息或自动化相关专业作为备选。填报时注意院校的地域分布和专业实力平衡，提高整体录取几率。',
      
      // 新增：控制详情对话框
      recommendationDetailDialogVisible: false,
      selectedRecommendation: null, // 存储选中的推荐项 { result: ..., index: ... }
    };
  },
  methods: {
    /** 选择测评模式 */
    selectMode(mode) {
      this.evaluateMode = mode;
      // 更新 evaluateParam 的逻辑，与之前 watch 中的逻辑保持一致
      if (mode === 'score') {
        this.evaluateParam.byScore = true;
        this.evaluateParam.byTag = false;
      } else if (mode === 'tag') {
        this.evaluateParam.byScore = false;
        this.evaluateParam.byTag = true;
      } else if (mode === 'both') {
        this.evaluateParam.byScore = true;
        this.evaluateParam.byTag = true;
      } else if (mode === 'ai') {
        this.evaluateParam.byScore = true; // AI 模式也基于分数和标签
        this.evaluateParam.byTag = true;
      }
      // 切换模式时可以考虑是否重置结果区域
      // this.evaluateResultShow = false;
      // this.evaluateResult = [];
    },
    
    /** 专业测评 */
    handlerEvaluate() {
      if (!this.evaluateParam.studentNo) {
        this.$message.warning('请输入学生学号');
        return;
      }
      
      this.evaluateResultShow = true;
      this.evaluateLoading = true;
      
      if (this.evaluateMode === 'ai') {
        // 模拟AI分析延迟
        setTimeout(() => {
          this.evaluateResult = this.mockAIResults();
          this.evaluateLoading = false;
          this.$nextTick(() => {
            this.initCharts();
          });
        }, 2000);
      } else {
        evaluate(this.evaluateParam).then(
          response => {
            this.evaluateResult = response.data.results;
            this.evaluateLoading = false;
          }
        ).catch(() => {
          this.evaluateLoading = false;
        });
      }
    },
    
    /** 重置表单 */
    resetForm() {
      this.evaluateParam.studentNo = '';
      this.selectMode('score'); // 重置时默认选中第一个模式
      this.evaluateResultShow = false;
      this.evaluateResult = [];
    },
    
    /** 获取时间线项的类型 */
    getTimelineItemType(index) {
      const types = ['primary', 'success', 'warning', 'danger', 'info'];
      return types[index % types.length];
    },
    
    /** 获取时间线项的颜色 */
    getTimelineItemColor(index) {
      const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];
      return colors[index % colors.length];
    },
    
    /** 模拟AI分析结果 */
    mockAIResults() {
      const colleges = [
        '清华大学-计算机科学与技术',
        '北京大学-软件工程',
        '浙江大学-人工智能',
        '复旦大学-数据科学与大数据技术',
        '上海交通大学-电子信息工程',
        '南京大学-信息安全',
        '中国科学技术大学-物理学',
        '哈尔滨工业大学-自动化'
      ];
      
      return colleges.slice(0, this.aiOptions.count);
    },
    
    /** 获取随机匹配分数 */
    getRandomMatchScore(index) {
      // 根据推荐顺序递减匹配度
      return Math.floor(98 - index * 3 - Math.random() * 5);
    },
    
    /** 获取随机标签 */
    getRandomTags(index) {
      const allTags = [
        '就业前景好', '专业基础扎实', '实验条件优越', 
        '师资力量强', '学科排名靠前', '国家重点学科',
        '性格匹配度高', '适合研究型人才', '校企合作多',
        '国际交流机会多', '奖学金丰富', '创新创业氛围浓'
      ];
      
      // 随机选择3-4个标签
      const count = 3 + Math.floor(Math.random() * 2);
      const result = [];
      const usedIndices = new Set();
      
      while (result.length < count) {
        const randomIndex = Math.floor(Math.random() * allTags.length);
        if (!usedIndices.has(randomIndex)) {
          usedIndices.add(randomIndex);
          result.push(allTags[randomIndex]);
        }
      }
      
      return result;
    },
    
    /** 从结果中提取学校名称 */
    getCollegeName(result) {
      const parts = result.split('-');
      return parts[0] || result;
    },
    
    /** 从结果中提取专业名称 */
    getMajorName(result) {
      const parts = result.split('-');
      return parts[1] || '';
    },
    
    /** 处理推荐卡片的查看详情点击 */
    handleRecommendationDetail(result, index) {
      const college = this.getCollegeName(result);
      const major = this.getMajorName(result);
      console.log(`查看详情点击: 推荐 ${index + 1}, 学校: ${college}, 专业: ${major}`);
      
      // 设置选中的推荐项数据，包含原始结果和索引
      this.selectedRecommendation = { 
          result: result, 
          index: index 
      };
      // 打开对话框
      this.recommendationDetailDialogVisible = true;
      
      // 移除之前的提示信息
      // this.$message.info(`模拟查看"${college} - ${major}"的详情`);
    },
    
    /** 初始化图表 */
    initCharts() {
      this.initRadarChart();
      this.initBarChart();
    },
    
    /** 初始化雷达图 */
    initRadarChart() {
      const chartDom = document.getElementById('matchRadarChart');
      if (!chartDom) return;
      
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'item'
        },
        radar: {
          indicator: [
            { name: '学科兴趣', max: 100 },
            { name: '就业前景', max: 100 },
            { name: '院校环境', max: 100 },
            { name: '专业潜力', max: 100 },
            { name: '性格匹配', max: 100 }
          ]
        },
        series: [
          {
            name: '匹配度分析',
            type: 'radar',
            data: [
              {
                value: [
                  90 + Math.floor(Math.random() * 10),
                  80 + Math.floor(Math.random() * 15),
                  85 + Math.floor(Math.random() * 10),
                  90 + Math.floor(Math.random() * 5),
                  75 + Math.floor(Math.random() * 20)
                ],
                name: '综合匹配度',
                areaStyle: {
                  color: 'rgba(64, 158, 255, 0.6)'
                }
              }
            ]
          }
        ]
      };
      
      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    
    /** 初始化柱状图 */
    initBarChart() {
      const chartDom = document.getElementById('scoreBarChart');
      if (!chartDom) return;
      
      const myChart = echarts.init(chartDom);
      const colleges = this.evaluateResult.slice(0, 5).map(item => this.getCollegeName(item));
      const scores = colleges.map((_, index) => this.getRandomMatchScore(index));
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          max: 100
        },
        yAxis: {
          type: 'category',
          data: colleges,
          axisLabel: {
            width: 80,
            overflow: 'truncate'
          }
        },
        series: [
          {
            name: '匹配分数',
            type: 'bar',
            data: scores,
            itemStyle: {
              color: function(params) {
                const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];
                return colors[params.dataIndex % colors.length];
              }
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c}%'
            }
          }
        ]
      };
      
      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    
    /** 分享结果 */
    shareResult() {
      this.$message.success('分享功能开发中，敬请期待！');
    },
    
    /** 导出结果 */
    exportResult() {
      this.$message.success('结果导出功能开发中，敬请期待！');
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  .search-card {
    margin-bottom: 20px;
    
    .search-header {
      margin-bottom: 20px;
      
      .title {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        
        i {
          margin-right: 8px;
          color: #409EFF;
        }
      }
      
      .description {
        color: #606266;
        font-size: 14px;
      }
    }
    
    .search-form {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      
      .el-form-item {
        margin-right: 20px;
        margin-bottom: 10px;
      }
      
      .evaluation-mode-selector {
        margin-bottom: 15px;
        
        ::v-deep .el-form-item__label {
          padding-top: 8px;
          line-height: normal;
          align-self: flex-start;
        }
        
        ::v-deep .el-form-item__content {
           line-height: normal;
        }

        .mode-cards {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
        }
        
        .mode-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 150px;
          height: 100px;
          border: 1px solid #dcdfe6;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.3s ease;
          background-color: #fff;
          padding: 10px;
          text-align: center;
          
          .card-icon {
            font-size: 28px;
            margin-bottom: 8px;
            color: #606266;
          }
          
          .card-title {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-bottom: 4px;
          }
          
          .card-desc {
            font-size: 12px;
            color: #909399;
          }
          
          &:hover {
            border-color: #c0c4cc;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
          }
          
          &.active {
            border-color: #409EFF;
            background-color: #ecf5ff;
            
            .card-icon {
              color: #409EFF;
            }
            .card-title {
              color: #409EFF;
            }
          }
          
          &.ai-card.active {
             border-color: #67C23A;
             background-color: #f0f9eb;
             .card-icon, .card-title {
               color: #67C23A;
             }
          }
        }
      }
      
      .action-buttons {
         margin-left: auto;
      }
    }
    
    .ai-options {
      margin-top: 15px;
      padding: 15px;
      background-color: #f8f9fb;
      border-radius: 4px;
      
      .el-divider {
        margin: 0 0 20px 0;
        
        i {
          margin-right: 5px;
          color: #67C23A;
        }
      }
      
      .ai-param-form {
        .param-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 15px 30px;
          align-items: center;
        }
        
        .param-item {
          margin-bottom: 0;
          display: flex;
          align-items: center;
        }
        
        .param-dimension {
           flex: 1 1 300px;
           min-width: 280px;
        }
        
        .param-depth {
          flex: 1 1 200px;
          min-width: 180px;
          
          ::v-deep .el-form-item__label {
            width: 70px;
            flex-shrink: 0;
            margin-right: 10px;
          }
          ::v-deep .el-form-item__content {
            flex-grow: 1;
            margin-left: 0 !important;
            .el-slider {
               width: 100% !important; 
            }
          }
        }
        
        .param-count {
          flex: 0 0 auto;
          ::v-deep .el-form-item__label {
             width: 70px;
             flex-shrink: 0;
             margin-right: 10px;
          }
           ::v-deep .el-form-item__content {
             margin-left: 0 !important;
           }
        }
      }
    }
  }
  
  .result-card {
    .result-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        
        i {
          margin-right: 8px;
          color: #409EFF;
        }
        
        .ai-tag {
          margin-left: 10px;
        }
      }
    }
    
    .result-content {
      min-height: 300px;
      
      .student-info-panel {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f8f9fb;
        border-radius: 4px;
        
        .student-basic-info {
          display: flex;
          align-items: center;
          min-width: 250px;
          margin-right: 30px;
          
          .avatar {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 60px;
            margin-right: 15px;
            background-color: #409EFF;
            border-radius: 50%;
            
            i {
              font-size: 30px;
              color: #fff;
            }
          }
          
          .info {
            .name {
              font-size: 16px;
              font-weight: 600;
              margin-bottom: 8px;
            }
            
            .stats {
              .el-tag {
                margin-right: 5px;
              }
            }
          }
        }
        
        .ai-summary {
          flex: 1;
          min-width: 300px;
          
          .summary-title {
            display: flex;
            align-items: center;
            font-weight: 600;
            margin-bottom: 8px;
            
            i {
              margin-right: 5px;
              color: #67C23A;
            }
          }
          
          .summary-content {
            color: #606266;
            line-height: 1.6;
          }
        }
      }
      
      .chart-panel {
        margin-bottom: 25px;
        
        .chart-title {
          font-weight: 600;
          margin-bottom: 15px;
          padding-left: 10px;
          border-left: 3px solid #409EFF;
        }
        
        .charts {
          display: flex;
          flex-wrap: wrap;
          
          .radar-chart {
            width: 50%;
            height: 300px;
            min-width: 300px;
          }
          
          .bar-chart {
            width: 50%;
            height: 300px;
            min-width: 300px;
          }
          
          @media (max-width: 768px) {
            .radar-chart, .bar-chart {
              width: 100%;
            }
          }
        }
      }
      
      .recommendations-panel {
        margin-bottom: 25px;
        
        .panel-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 600;
          margin-bottom: 15px;
          padding-left: 10px;
          border-left: 3px solid #409EFF;
        }
        
        .recommendation-card {
          margin-bottom: 10px;
          
          .recommendation-content {
            padding: 10px;
            font-size: 14px;
            line-height: 1.5;
            
            .ai-recommendation-detail {
              margin-top: 10px;
              padding-top: 10px;
              border-top: 1px dashed #ebeef5;
              
              .match-score {
                margin-bottom: 8px;
              }
              
              .match-tags {
                .match-tag {
                  margin-right: 5px;
                  margin-bottom: 5px;
                }
              }
            }
          }
        }
        
        .card-view {
          .recommendation-card-grid {
            margin-bottom: 20px;
            overflow: hidden;
            transition: all 0.3s;
            
            &:hover {
              transform: translateY(-5px);
              box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            }
            
            .card-header {
              height: 60px;
              color: #fff;
              padding: 15px;
              position: relative;
              
              .rank {
                font-size: 24px;
                font-weight: bold;
              }
              
              .match {
                position: absolute;
                right: 15px;
                top: 15px;
                font-size: 14px;
              }
            }
            
            .card-content {
              padding: 15px;
              
              h4 {
                margin: 0 0 10px 0;
                font-size: 16px;
              }
              
              p {
                margin: 0 0 15px 0;
                color: #606266;
              }
              
              .ai-tags {
                margin-bottom: 10px;
                
                .el-tag {
                  margin-right: 5px;
                }
              }
            }
            
            .card-footer {
              padding: 10px 15px;
              background-color: #f8f9fb;
              text-align: right;
            }
          }
        }
      }
      
      .expert-advice {
        padding: 15px;
        background-color: #f0f9eb;
        border-radius: 4px;
        
        .advice-title {
          display: flex;
          align-items: center;
          font-weight: 600;
          margin-bottom: 10px;
          
          i {
            margin-right: 5px;
            color: #67C23A;
          }
        }
        
        .advice-content {
          p {
            line-height: 1.6;
            margin-bottom: 15px;
          }
        }
      }
    }
  }
}

.recommendation-detail-dialog {
  .detail-content {
    .detail-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ebeef5;

      .rank {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        margin-right: 15px;
        flex-shrink: 0;
      }

      .college-major {
        flex-grow: 1;
        .college-name {
          font-size: 16px;
          font-weight: bold;
          margin: 0 0 5px 0;
        }
        .major-name {
          color: #606266;
          font-size: 14px;
          margin: 0;
        }
      }
      
      .match-score-detail {
        font-size: 14px;
        color: #E6A23C;
        font-weight: 500;
        margin-left: 15px;
        flex-shrink: 0;
      }
    }
    
    .detail-desc {
      margin-bottom: 20px;
    }

    .detail-tags {
      margin-bottom: 20px;
      .tags-title {
        font-size: 14px;
        color: #606266;
        margin-bottom: 10px;
      }
      .detail-tag {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }
    
    .detail-placeholder {
      color: #909399;
      font-size: 13px;
      text-align: center;
      padding: 10px;
      background-color: #f9f9f9;
      border-radius: 4px;
    }
  }
}
</style>
